{% extends "base.html" %}

{% block title %}系统设置 - {{ app_name }}{% endblock %}

{% block page_title %}系统设置{% endblock %}

{% block page_subtitle %}用户管理与系统配置{% endblock %}

{% block content %}
    <!-- Settings Tabs -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 mb-8">
        <div class="border-b border-slate-200">
            <nav class="flex space-x-8 px-6" aria-label="Settings tabs">
                <!-- <button class="tab-btn py-4 px-1 border-b-2 border-blue-500 font-medium text-sm text-blue-600" data-tab="account">
                    账户管理
                </button> -->
                <button class="tab-btn py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="system">
                    系统配置
                </button>
                <!-- <button class="tab-btn py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="security">
                    安全设置
                </button>
                <button class="tab-btn py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="backup">
                    备份恢复
                </button> -->
                <button class="tab-btn py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="logs">
                    系统日志
                </button>
            </nav>
        </div>

        <!-- Account Management Tab -->
        <div id="account-tab" class="tab-content active p-6">
            <div class="mb-6">
                <h3 class="text-xl font-bold text-slate-800 mb-2">账户管理</h3>
                <p class="text-slate-600">管理系统用户账户和权限</p>
            </div>

            <!-- Add User Button -->
            <div class="mb-6">
                <button onclick="showAddUserModal()" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                    <i class="fas fa-plus mr-2"></i>添加用户
                </button>
            </div>

            <!-- Users Table -->
            <div class="overflow-x-auto rounded-lg border border-slate-200">
                <table class="min-w-full divide-y divide-slate-200 table-hover">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">用户</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">邮箱</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">角色</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">状态</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">创建时间</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-slate-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center mr-3">
                                        <i class="fas fa-user text-white"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-slate-900">admin</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">admin@example.com</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
                                    管理员
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    <i class="fas fa-circle text-xs mr-1"></i>在线
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">2024-01-15 14:30</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button onclick="showEditUserModal('admin', 'admin@example.com')" class="text-indigo-600 hover:text-indigo-900 mr-3 transition-colors">编辑</button>
                                <button class="text-red-600 hover:text-red-900 transition-colors">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center mr-3">
                                        <i class="fas fa-user text-white"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-slate-900">zhangsan</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">zhangsan@example.com</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                    普通用户
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-slate-100 text-slate-800">
                                    <i class="fas fa-circle text-xs mr-1"></i>离线
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">2024-01-15 09:15</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button onclick="showEditUserModal('zhangsan', 'zhangsan@example.com')" class="text-indigo-600 hover:text-indigo-900 mr-3 transition-colors">编辑</button>
                                <button class="text-red-600 hover:text-red-900 transition-colors">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- System Configuration Tab -->
        <div id="system-tab" class="tab-content p-6">
            <div class="mb-6">
                <h3 class="text-xl font-bold text-slate-800 mb-2">系统配置</h3>
                <p class="text-slate-600">配置系统参数和功能设置</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Basic Settings -->
                <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">基本设置</h4>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">系统名称</label>
                            <input type="text" value="大模型信访分析系统" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">系统描述</label>
                            <textarea rows="3" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">基于大语言模型的智能信访分析系统</textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">时区</label>
                            <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                <option>Asia/Shanghai (UTC+8)</option>
                                <option>UTC</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Feature Settings -->
                <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">功能设置</h4>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">AI分析功能</p>
                                <p class="text-xs text-slate-500">启用AI智能分析功能</p>
                            </div>
                            <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">实时数据更新</p>
                                <p class="text-xs text-slate-500">启用实时数据同步</p>
                            </div>
                            <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">邮件通知</p>
                                <p class="text-xs text-slate-500">启用邮件通知功能</p>
                            </div>
                            <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">数据备份</p>
                                <p class="text-xs text-slate-500">启用自动数据备份</p>
                            </div>
                            <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                        </div>
                    </div>
                </div>

                <!-- Data Settings -->
                <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">数据设置</h4>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">数据保留期限</label>
                            <input type="number" value="365" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">批量处理限制</label>
                            <input type="number" value="1000" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">数据清理间隔</label>
                            <input type="number" value="30" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                        </div>
                    </div>
                </div>

                <!-- API Settings -->
                <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">API设置</h4>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">API密钥</label>
                            <div class="flex">
                                <input type="password" value="sk-xxxxxx" class="flex-1 px-4 py-2.5 border border-slate-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                <button class="px-4 py-2.5 bg-slate-100 border border-l-0 border-slate-300 rounded-r-lg hover:bg-slate-200 transition-colors">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">请求超时时间</label>
                            <input type="number" value="60" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">CORS域名</label>
                            <input type="text" placeholder="http://localhost:3000" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6">
                <button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                    保存设置
                </button>
            </div>
        </div>

        <!-- Security Settings Tab -->
        <div id="security-tab" class="tab-content p-6">
            <div class="mb-6">
                <h3 class="text-xl font-bold text-slate-800 mb-2">安全设置</h3>
                <p class="text-slate-600">配置系统安全和访问控制</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Password Policy -->
                <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">密码策略</h4>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-slate-700">最小长度</p>
                                <p class="text-xs text-slate-500">密码最少字符数</p>
                            </div>
                            <input type="number" value="8" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">必须包含大写字母</p>
                                <p class="text-xs text-slate-500">A-Z</p>
                            </div>
                            <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">必须包含数字</p>
                                <p class="text-xs text-slate-500">0-9</p>
                            </div>
                            <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">必须包含特殊字符</p>
                                <p class="text-xs text-slate-500">!@#$%^&*</p>
                            </div>
                            <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-slate-700">密码有效期</p>
                                <p class="text-xs text-slate-500">单位：天</p>
                            </div>
                            <input type="number" value="90" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                    </div>
                </div>

                <!-- Login Security -->
                <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">登录安全</h4>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">双因子认证</p>
                                <p class="text-xs text-slate-500">启用2FA验证</p>
                            </div>
                            <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">登录失败锁定</p>
                                <p class="text-xs text-slate-500">多次失败后锁定账户</p>
                            </div>
                            <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-slate-700">最大尝试次数</p>
                                <p class="text-xs text-slate-500">失败尝试限制</p>
                            </div>
                            <input type="number" value="5" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-slate-700">锁定时间</p>
                                <p class="text-xs text-slate-500">单位：分钟</p>
                            </div>
                            <input type="number" value="30" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-slate-700">会话超时时间</p>
                                <p class="text-xs text-slate-500">无操作后自动登出</p>
                            </div>
                            <input type="number" value="30" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                    </div>
                </div>

                <!-- IP Restrictions -->
                <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">IP限制</h4>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">启用IP白名单</p>
                                <p class="text-xs text-slate-500">限制允许访问的IP</p>
                            </div>
                            <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">允许IP地址</label>
                            <textarea rows="4" placeholder="每行一个IP地址或CIDR&#10;例如：&#10;192.168.1.0/24" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"></textarea>
                        </div>
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">限制登录地点</p>
                                <p class="text-xs text-slate-500">限制异地登录</p>
                            </div>
                            <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                        </div>
                    </div>
                </div>

                <!-- Audit Log -->
                <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">审计日志</h4>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">记录用户操作</p>
                                <p class="text-xs text-slate-500">记录用户所有操作</p>
                            </div>
                            <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-slate-700">日志保留天数</p>
                                <p class="text-xs text-slate-500">自动清理过期日志</p>
                            </div>
                            <input type="number" value="180" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                            <div>
                                <p class="text-sm font-medium text-slate-700">异常登录提醒</p>
                                <p class="text-xs text-slate-500">异常登录通知</p>
                            </div>
                            <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">通知邮箱</label>
                            <input type="email" placeholder="admin@example.com" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6">
                <button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                    保存安全设置
                </button>
            </div>
        </div>

        <!-- Backup and Recovery Tab -->
        <div id="backup-tab" class="tab-content p-6">
            <div class="mb-6">
                <h3 class="text-xl font-bold text-slate-800 mb-2">备份恢复</h3>
                <p class="text-slate-600">管理系统数据备份和恢复</p>
            </div>

            <!-- Manual Backup -->
            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6 mb-6">
                <h4 class="text-lg font-semibold text-slate-800 mb-4">手动备份</h4>
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-slate-600">立即创建完整数据备份</p>
                        <p class="text-sm text-slate-500 mt-1">
                            上次备份：2024-01-15 10:00
                        </p>
                    </div>
                    <button class="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                        <i class="fas fa-download mr-2"></i>开始备份
                    </button>
                </div>
            </div>

            <!-- Backup Schedule -->
            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6 mb-6">
                <h4 class="text-lg font-semibold text-slate-800 mb-4">备份计划</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">备份频率</label>
                        <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                            <option>每天</option>
                            <option>每周</option>
                            <option>每月</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">备份时间</label>
                        <input type="time" value="02:00" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">保留备份数</label>
                        <input type="number" value="30" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">备份存储路径</label>
                        <input type="text" value="/backups" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                </div>
            </div>

            <!-- Backup History -->
            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                <h4 class="text-lg font-semibold text-slate-800 mb-4">备份历史</h4>
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-4 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors">
                        <div>
                            <p class="text-sm font-medium text-slate-900">backup_20240115_100000.sql</p>
                            <p class="text-xs text-slate-500">大小：125 MB | 类型：手动备份</p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                                <i class="fas fa-download"></i>
                            </button>
                            <button class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors">
                                <i class="fas fa-undo"></i>
                            </button>
                            <button class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors">
                        <div>
                            <p class="text-sm font-medium text-slate-900">backup_20240114_020000.sql</p>
                            <p class="text-xs text-slate-500">大小：118 MB | 类型：定时备份</p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                                <i class="fas fa-download"></i>
                            </button>
                            <button class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors">
                                <i class="fas fa-undo"></i>
                            </button>
                            <button class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Restore Section -->
            <div class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                <h4 class="text-sm font-semibold text-yellow-800 mb-2">
                    <i class="fas fa-exclamation-triangle mr-2"></i>恢复警告
                </h4>
                <p class="text-sm text-yellow-700">恢复操作将覆盖当前数据，请确保已备份重要数据</p>
            </div>
        </div>

        <!-- System Logs Tab -->
        <div id="logs-tab" class="tab-content p-6">
            <div class="mb-6">
                <h3 class="text-xl font-bold text-slate-800 mb-2">系统日志</h3>
                <p class="text-slate-600">查看和管理系统运行日志</p>
            </div>

            <!-- Log Filters -->
            <div class="bg-slate-50 rounded-xl p-6 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">日志级别</label>
                        <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                            <option>全部</option>
                            <option>错误</option>
                            <option>警告</option>
                            <option>信息</option>
                            <option>调试</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">模块</label>
                        <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                            <option>全部</option>
                            <option>用户管理</option>
                            <option>数据处理</option>
                            <option>系统</option>
                            <option>API</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">开始时间</label>
                        <input type="datetime-local" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">结束时间</label>
                        <input type="datetime-local" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                </div>
                <div class="mt-4 flex items-center justify-between">
                    <button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                        <i class="fas fa-search mr-2"></i>搜索
                    </button>
                    <button class="text-indigo-600 hover:text-indigo-800 transition-colors">
                        <i class="fas fa-download mr-2"></i>导出日志
                    </button>
                </div>
            </div>

            <!-- Log Entries -->
            <div class="space-y-4">
                <div class="log-entry bg-white p-4 rounded-lg">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="flex items-center mb-1">
                                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800 mr-2">
                                    <i class="fas fa-times-circle mr-1"></i>错误
                                </span>
                                <span class="text-sm text-slate-500">2024-01-15 14:32:15</span>
                                <span class="text-sm text-slate-500 ml-4">用户管理</span>
                            </div>
                            <p class="text-sm text-slate-800">用户登录失败</p>
                            <p class="text-xs text-slate-500 mt-1">IP: 192.168.1.100 | 用户: zhangsan</p>
                        </div>
                        <button class="text-slate-400 hover:text-slate-600 transition-colors">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>

                <div class="log-entry warning bg-white p-4 rounded-lg">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="flex items-center mb-1">
                                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800 mr-2">
                                    <i class="fas fa-exclamation-triangle mr-1"></i>警告
                                </span>
                                <span class="text-sm text-slate-500">2024-01-15 14:30:00</span>
                                <span class="text-sm text-slate-500 ml-4">系统</span>
                            </div>
                            <p class="text-sm text-slate-800">磁盘空间使用率超过80%</p>
                            <p class="text-xs text-slate-500 mt-1">路径：/var/log | 使用率：85%</p>
                        </div>
                        <button class="text-slate-400 hover:text-slate-600 transition-colors">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>

                <div class="log-entry success bg-white p-4 rounded-lg">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="flex items-center mb-1">
                                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800 mr-2">
                                    <i class="fas fa-check-circle mr-1"></i>成功
                                </span>
                                <span class="text-sm text-slate-500">2024-01-15 14:25:30</span>
                                <span class="text-sm text-slate-500 ml-4">数据处理</span>
                            </div>
                            <p class="text-sm text-slate-800">数据导入完成</p>
                            <p class="text-xs text-slate-500 mt-1">导入记录数：1,234 | 耗时：5.2秒</p>
                        </div>
                        <button class="text-slate-400 hover:text-slate-600 transition-colors">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>

                <div class="log-entry bg-white p-4 rounded-lg">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="flex items-center mb-1">
                                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-2">
                                    <i class="fas fa-info-circle mr-1"></i>信息
                                </span>
                                <span class="text-sm text-slate-500">2024-01-15 14:20:15</span>
                                <span class="text-sm text-slate-500 ml-4">API</span>
                            </div>
                            <p class="text-sm text-slate-800">API请求成功</p>
                            <p class="text-xs text-slate-500 mt-1">方法：POST | 状态：200 | 耗时：230ms</p>
                        </div>
                        <button class="text-slate-400 hover:text-slate-600 transition-colors">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Pagination -->
            <div class="mt-6 flex items-center justify-between">
                <div class="text-sm text-slate-700">
                    显示：1-10 条，共 156 条记录
                </div>
                <div class="flex items-center space-x-2">
                    <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 disabled:opacity-50 transition-colors" disabled>
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="px-3 py-1 bg-indigo-600 text-white rounded-lg">1</button>
                    <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">2</button>
                    <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">3</button>
                    <span class="px-2">...</span>
                    <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">16</button>
                    <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add User Modal -->
    <div id="addUserModal" class="fixed inset-0 bg-slate-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full transform transition-all">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">添加用户</h3>
                    <button onclick="hideAddUserModal()" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-times text-slate-600"></i>
                    </button>
                </div>
                <form class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">用户名 <span class="text-red-500">*</span></label>
                        <input type="text" id="add-username" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" required pattern="^[a-zA-Z0-9_]+$" oninput="validateUsername(this)">
                        <p class="mt-1 text-sm text-slate-500">仅支持英文字母、数字和下划线</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">邮箱 <span class="text-red-500">*</span></label>
                        <input type="email" id="add-email" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" required>
                        <p class="mt-1 text-sm text-slate-500">用于登录和系统通知</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">密码</label>
                        <input type="password" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">角色</label>
                        <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                            <option>管理员</option>
                            <option>普通用户</option>
                        </select>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" onclick="hideAddUserModal()" class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            取消
                        </button>
                        <button type="submit" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-4 py-2 rounded-lg hover:shadow-lg transition-all duration-300">
                            创建
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit User Modal -->
    <div id="editUserModal" class="fixed inset-0 bg-slate-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full transform transition-all">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">编辑用户</h3>
                    <button onclick="hideEditUserModal()" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-times text-slate-600"></i>
                    </button>
                </div>
                <form class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">用户名 <span class="text-red-500">*</span></label>
                        <input type="text" id="edit-username" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" required pattern="^[a-zA-Z0-9_]+$" oninput="validateUsername(this)">
                        <p class="mt-1 text-sm text-slate-500">仅支持英文字母、数字和下划线</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">邮箱 <span class="text-red-500">*</span></label>
                        <input type="email" id="edit-email" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" required>
                        <p class="mt-1 text-sm text-slate-500">用于登录和系统通知</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">新密码</label>
                        <input type="password" id="edit-password" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" placeholder="留空则不修改密码">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">角色</label>
                        <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                            <option>管理员</option>
                            <option>普通用户</option>
                        </select>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" onclick="hideEditUserModal()" class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            取消
                        </button>
                        <button type="submit" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-4 py-2 rounded-lg hover:shadow-lg transition-all duration-300">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
<script>
    // 系统设置页面JavaScript功能
    document.addEventListener('DOMContentLoaded', function() {
        // 标签页切换功能
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');
        
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const targetTab = this.getAttribute('data-tab');
                
                // 移除所有标签页的激活状态
                tabBtns.forEach(b => {
                    b.classList.remove('border-blue-500', 'text-blue-600');
                    b.classList.add('border-transparent', 'text-gray-500');
                });
                
                // 激活当前标签页
                this.classList.remove('border-transparent', 'text-gray-500');
                this.classList.add('border-blue-500', 'text-blue-600');
                
                // 隐藏所有内容
                tabContents.forEach(content => {
                    content.classList.remove('active');
                    content.style.display = 'none';
                });
                
                // 显示目标内容
                const targetContent = document.getElementById(targetTab + '-tab');
                if (targetContent) {
                    targetContent.classList.add('active');
                    targetContent.style.display = 'block';
                }
            });
        });
        
        // 初始化显示第一个标签页
        const firstTab = document.querySelector('.tab-btn');
        if (firstTab) {
            firstTab.click();
        }
        
        // 表单提交处理
        const forms = document.querySelectorAll('form');
        forms.forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                showNotification('设置已保存', 'success');
            });
        });
    });
    
    // 切换开关功能
    function toggleSwitch(element) {
        element.classList.toggle('active');
    }
    
    // 显示添加用户模态框
    function showAddUserModal() {
        const modal = document.getElementById('addUserModal');
        if (modal) {
            modal.classList.remove('hidden');
        }
    }
    
    // 隐藏添加用户模态框
    function hideAddUserModal() {
        const modal = document.getElementById('addUserModal');
        if (modal) {
            modal.classList.add('hidden');
        }
    }
    
    // 显示编辑用户模态框
    function showEditUserModal(username, email) {
        const modal = document.getElementById('editUserModal');
        if (modal) {
            document.getElementById('edit-username').value = username;
            document.getElementById('edit-email').value = email;
            modal.classList.remove('hidden');
        }
    }
    
    // 隐藏编辑用户模态框
    function hideEditUserModal() {
        const modal = document.getElementById('editUserModal');
        if (modal) {
            modal.classList.add('hidden');
        }
    }
    
    // 用户名验证
    function validateUsername(input) {
        const pattern = /^[a-zA-Z0-9_]+$/;
        if (!pattern.test(input.value)) {
            input.setCustomValidity('用户名只能包含英文字母、数字和下划线');
        } else {
            input.setCustomValidity('');
        }
    }
    
    // 显示通知
    function showNotification(message, type = 'info') {
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ${
            type === 'success' ? 'bg-green-500' : 
            type === 'error' ? 'bg-red-500' : 
            type === 'warning' ? 'bg-yellow-500' : 'bg-blue-500'
        } text-white`;
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        // 3秒后自动移除
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 3000);
    }
</script>
{% endblock %}